<template>
    <div>

      <!-- 修改 -->
      <el-dialog title="修改页面" :visible.sync="dialogFormVisible1">
  <el-form :model="pojo1">
    <el-form-item label="文章标题" :label-width="formLabelWidth">
      <el-input v-model="pojo1.name" autocomplete="off"></el-input>
    </el-form-item>

    
    <el-form-item label="列表图" >
      <el-upload
  class="avatar-uploader"
  action="http://localhost:8088/zixun/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
    </el-form-item>

 


    <el-form-item label="文章分类" :label-width="formLabelWidth">
       <el-select v-model="pojo1.type"  >
  <el-option label="健康头条" value="健康头条"></el-option>
  <el-option  label="慢病护理" value="慢病护理"  ></el-option>
</el-select>
    </el-form-item>


    <el-form-item label="文章内容">
    <el-input type="textarea" v-model="pojo1.ms"></el-input>
  </el-form-item>

  <el-form-item label="发布时间">
      <el-date-picker type="date" value-format="yyyy-MM-dd HH:MM:ss" placeholder="选择日期" v-model="pojo1.createtime" style="width: 100%;"></el-date-picker>
  </el-form-item>

  <el-form-item label="排序号">
    <el-input  v-model="pojo1.xuhao"></el-input><span>请填写数字，数字越大排序越靠前</span>
  </el-form-item>
  
  <el-form-item label="文章状态">
 {{ pojo1.status }}
  </el-form-item>
  
  <el-form-item label="发布人">
 {{ pojo1.userId }}
  </el-form-item>
  
  <el-form-item label="收藏量">
 {{ pojo1.num }}
  </el-form-item>  

  <el-form-item label="分享量">
 {{ pojo1.fenxiangnum }}
  </el-form-item>  

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="update()">确 定</el-button>
    <el-button @click="dialogFormVisible1 = false">返回</el-button>
  </div>


</el-dialog>
        <!--添加 -->
        <el-dialog title="添加页面" :visible.sync="dialogFormVisible">
  <el-form :model="pojo">
    <el-form-item label="文章标题" :label-width="formLabelWidth">
      <el-input v-model="pojo.name" autocomplete="off"></el-input>
    </el-form-item>

    
    <el-form-item label="列表图" :label-width="formLabelWidth">
      <el-upload
  class="avatar-uploader"
  action="http://localhost:8088/zixun/upload"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
    </el-form-item>

 


    <el-form-item label="文章分类" :label-width="formLabelWidth">
       <el-select v-model="pojo.type"  >
  <el-option label="健康头条" value="健康头条"></el-option>
  <el-option  label="慢病护理" value="慢病护理"  ></el-option>
</el-select>
    </el-form-item>


    <el-form-item label="文章内容">
    <el-input type="textarea" v-model="pojo.ms"></el-input>
  </el-form-item>

  <el-form-item label="发布时间">
      <el-date-picker type="date" value-format="yyyy-MM-dd HH:MM:ss" placeholder="选择日期" v-model="pojo.times" style="width: 100%;"></el-date-picker>
  </el-form-item>

  <el-form-item label="排序号">
    <el-input  v-model="pojo.xuhao"></el-input><span>请填写数字，数字越大排序越靠前</span>
  </el-form-item>
  

  
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="add()">确 定</el-button>
    <el-button @click="dialogFormVisible = false">返回</el-button>
  </div>


</el-dialog>
        <!-- 模糊查询 -->
        <el-form ref="form" :model="form" label-width="80px" >
  <el-form-item label="文章标题"  >
    <el-input v-model="form.name"  ></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="findAll()">查询</el-button>
    <el-button>取消</el-button>
    <el-button type="primary" @click="toadd()">添加</el-button>
  </el-form-item>
</el-form>
        <!-- 查所有 -->
        <el-table :data="tableData" style="width: 100%">
       <el-table-column  prop="id"  label="序号"  > </el-table-column>
    <el-table-column prop="name"  label="文章标题" >  </el-table-column>
    <el-table-column label="列表图"  >
      <template slot-scope="scope">
         <img   :src="scope.row.img">
      </template>
    
    </el-table-column>
    <el-table-column prop="type"  label="文章分类" >  </el-table-column>
    <el-table-column prop="userId"  label="发布人" >  </el-table-column>
    <el-table-column  prop="status"  label="发布状态"  >
      <template slot-scope="scope">
        {{ scope.row.status==1?'待发布':'已发布'}}
      </template>
    </el-table-column>
    <el-table-column  prop="num"  label="收藏量" width="120"> </el-table-column>
    <el-table-column  prop="createtime"  label="操作时间" width="120"> </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
        <el-button type="text"  @click="toupdate(scope.row)" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table> 
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pageNum"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="total">
    </el-pagination>
    </div>
</template>

    <script>
    import axios from 'axios';
        export default {
            data() {
                return {
                    tableData:[],
                    pageNum:1,
                    pageSize:2,
                    total:0,
                    form:{},
                    pojo:{},
                    dialogFormVisible:false, 
                    dialogFormVisible1:false,
                    pojo1:{},
                    imageUrl:'',
                }
            },
            methods:{
              
              del(id){
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                         axios.get(`http://localhost:8088/zixun/del/?id=${id}`).then(res=>{
                        if(res.data>=0){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.findAll();
                        }
                            })
                        }).catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消删除'
                      });  
                    })  
                },
              update(){
                this.pojo1.img=this.imageUrl
         axios.post(`http://localhost:8088/zixun/update`,this.pojo1).then(res=>{
            if(res.data>=0){
             this.$message.success('修改成功')
             this.dialogFormVisible1 = false;
             this.findAll();
            }
            
        })  
              },

              toupdate(row){
          this.imageUrl=this.pojo1.img
                this.pojo1=row
                  this.dialogFormVisible1=true  
                  
              },

              handleAvatarSuccess(res) {
        this.imageUrl = res
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    },

    
          add(){
            this.pojo.img=this.imageUrl
         axios.post(`http://localhost:8088/zixun/add`,this.pojo).then(res=>{
            if(res.data>=0){
             this.$message.success('添加成功')
             this.dialogFormVisible = false;
             this.findAll();
            }
            
        })       
        
      },
      toadd(){
                      this.pojo={}
                      this.imageUrl=''
                      this.dialogFormVisible = true;     
                    },
                findAll(){
            axios.post(`http://localhost:8088/zixun/findAll?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.form).then(res=>{
                this.tableData = res.data.records;
                this.total = res.data.total;
            })
        },

        handleSizeChange(val) {
          this.pageSize = val;
          this.findAll();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.findAll();
        console.log(`当前页: ${val}`);
      }
            },
            created() {
                this.findAll();
            }
        }
</script>

<style scoped>
img{
  width: 50px;
}
</style>